<template>
    <view style="background-color:#fff;">
        <uni-nav-bar left-icon="left" :statusBar="true" titleSize="30px" leftText="返回" rightText="保存" title="添加跟进记录"
            @clickRight="addFn" @clickLeft="back" :fixed="true" backgroundColor="#3286ed" color="#fff" />

        <u--form class="form" labelPosition="left" labelWidth="100px" :model="form" :rules="rules" ref="form">
            <u-form-item @click="customerBtn" label="客户" prop="customerName" borderBottom ref="item1">
                <view>
                    <u--input v-model="form.customerName" border="none" :readonly="true"></u--input>
                </view>
                <u-icon slot="right" class="box" name="arrow-right" ></u-icon>
            </u-form-item>
            <u-form-item label="联系人" borderBottom ref="item1">
                <u--input v-model="contactName" border="none" :readonly="true"></u--input>
            </u-form-item>
            <u-form-item label="联系电话" borderBottom ref="item1">
                <u--input v-model="telephone" border="none" :readonly="true"></u--input>
            </u-form-item>
            <u-form-item label="跟进方式" prop="followMethod" borderBottom ref="item1" @click="followShow=true">
                <u--input v-model="form.followMethodway" border="none" :readonly="true"></u--input>
                <u-icon slot="right" class="box" name="arrow-right" @click="followShow=true"></u-icon>
            </u-form-item>
            <u-form-item label="跟进时间" prop="followTime" borderBottom ref="item1" @click="dateShow=true">
                <u--input v-model="form.followTime" border="none" :readonly="true"></u--input>
                <u-icon slot="right" class="box" name="arrow-right" @click="dateShow=true"></u-icon>
            </u-form-item>
            <u-form-item label="跟进内容" prop="followContent" borderBottom ref="item1">
            </u-form-item>
            <u-form-item borderBottom ref="item1">
                <u--textarea v-model="form.followContent" placeholder="请输入跟进内容"></u--textarea>
            </u-form-item>
            <u-form-item label="下次跟进时间" prop="nextFollowTime" borderBottom ref="item1" @click="dateShow2=true">
                <u--input v-model="form.nextFollowTime" border="none" :readonly="true"></u--input>
                <u-icon slot="right" class="box" name="arrow-right" @click="dateShow2=true"></u-icon>
            </u-form-item>
            <u-form-item label="地址" borderBottom ref="item1" @click="projectAddressBtn">
                <u--input v-model="form.position" border="none" :readonly="true"></u--input>
                <u-icon slot="right" class="box" name="arrow-right" @click="projectAddressBtn"></u-icon>
            </u-form-item>
            <u-form-item label="图片" borderBottom ref="item1">
                <u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
                    :maxCount="3"></u-upload>
            </u-form-item>

        </u--form>
        <u-toast ref="uToast"></u-toast>
        <!-- 下次跟进时间 -->
        <u-datetime-picker :closeOnClickOverlay="true" @close="dateShow2=false" :show="dateShow2"
            @cancel='dateShow2=false' @confirm="dateConfirmFn2" v-model="dateNow" mode="date"></u-datetime-picker>
        <!-- 跟进时间 -->
        <u-datetime-picker :closeOnClickOverlay="true" @close="dateShow=false" :show="dateShow" @cancel='dateShow=false'
            @confirm="dateConfirmFn" v-model="dateNow" mode="date"></u-datetime-picker>
        <!-- 跟进方式 -->
        <u-picker :closeOnClickOverlay="true" @close="followShow=false" :show="followShow"
            :columns="followMethodOptions" @confirm="followConfirmFn" @cancel="followShow=false" keyName="dictLabel">
        </u-picker>
        <!-- 收货地址 -->
        <uni-data-picker v-if="show==true" v-model='form.position' @change="onchange" :localdata="items" ref="pick"
            popup-title="请选择"></uni-data-picker>

    </view>
</template>

<script>
    import { provinceNameList} from '@/api/region/region.js'
    import {  getDicts } from '@/api/dictionary/index.js'
    import { addFollow } from "@/api/follow.js"
    import { getToken  } from '@/utils/auth.js'
    export default {
        data() {
            return {
                headers: {
                    Authorization: "Bearer " + getToken(),
                },
                form: {
                    pageNum: 1,
                    pageSize: 10,
                    customerId: null,
                    customerName: null,
                    followMethod: null,
                    followMethodway: '',
                    followTime: null,
                    followUserId: null,
                    followUserName: null,
                    followContent: null,
                    image: null,
                    enclosure: null,
                    position: null,
                    createId: null,
                    nextFollowTime: null
                },
                contactName: '',
                telephone: '',
                rules: {
                    followContent: [{
                        type: 'string',
                        required: true,
                        message: '请输入内容',
                        trigger: ['blur', 'change']
                    }],
                    customerName: [{
                        type: 'string',
                        required: true,
                        message: '请选择客户',
                        trigger: ['blur', 'change']
                    }],
                    followMethodway: [{
                        type: 'string',
                        required: true,
                        message: '请选择跟进方式',
                        trigger: ['blur', 'change']
                    }],
                    followTime: [{
                        type: 'string',
                        required: true,
                        message: '请选择跟进时间',
                        trigger: ['blur', 'change']
                    }],
                },
                followMethodOptions: [],
                show: false,
                followShow: false,
                dateShow: false,
                dateShow2: false,
                dateNow: '', //选择器当前时间
                fileList5: [],
            }
        },
        onLoad() {
            this.dateNow = this.getNowTime()
            console.log(this.dateNow);
            this.getFollowMethod()
            this.getProvince()
        },
	
        onBackPress() {
           this.getValueS()
        },
        methods: {
            getValueS(list) {
                console.log(list, "B页面传递数据");
                this.form.customerId = list.id
                this.form.customerName = list.name
                this.telephone = list.contactTelephone
                this.contactName = list.contactName

            },
            getNowTime() {
                var date = new Date()
                // console.log(date);
                var YY = date.getFullYear() + '-';
                var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return YY + MM + DD + " " + hh + mm + ss;
            },
            back() {
               uni.navigateBack({
               	delta:1
               })
            },
            async addFn() {
				var that=this
                const res = await this.$refs.form.validate()
                console.log(res);

                if (res) {
                    const res1 = await addFollow(this.form)
                    console.log(res1);
                    if (res1.code == 200) {
                        this.$refs.uToast.show({
                            type: 'success',
                            message: '添加成功！',
                            complete() {
                              uni.navigateBack({
								  delta:1
							  })
                            }
                        })
                    }
                }

            },
            // 跟进方式 biz_followmethod
            getFollowMethod() {
                getDicts('biz_followmethod').then(res => {
                    console.log(res);
                    this.followMethodOptions.push(res.data)
                })
            },
            // 跳转客户获取
            customerBtn() {
            
				uni.navigateTo({
				    url: "/pages/dialog/customer"
				})
            },
            followConfirmFn(e) {
                console.log(e);
                this.form.followMethodway = e.value[0].dictLabel
                this.form.followMethod = e.value[0].dictValue
                this.followShow = false
            },
            dateConfirmFn(e) {
                console.log(e);
                this.form.followTime = this.getTime(e.value)
                this.dateShow = false
            },
            dateConfirmFn2(e) {
                console.log(e);
                this.form.nextFollowTime = this.getTime(e.value)
                this.dateShow2 = false
            },
            // 时间格式化
            getTime(val) {
                var date = new Date(val);
                var YY = date.getFullYear() + '-';
                var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                console.log(YY + MM + DD + " " + hh + mm + ss);
                return YY + MM + DD + " " + hh + mm + ss;

            },
            projectAddressBtn() {
                this.show = true
                this.$nextTick(() => {
                    this.$refs.pick.show()
                })
            },
            onchange(e) {
                console.log(e);
                this.form.position = e.detail.value[0].text + e.detail.value[1].text + e.detail.value[2].text
                this.show = false
            },
            getProvince() {
                provinceNameList().then(response => {
                    this.items = this.getList(response.rows)
                })
            },
            getList(data) {
                data.forEach((item) => {
                    // console.log(item);
                    if (item.label) {
                        item.text = item.label
                        delete item.label
                    }
                    if (item.children) {
                        this.getList(item.children)
                    }
                })
                return data
            },
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })

                })
                for (let i = 0; i < lists.length; i++) {
                    console.log();
                    const result = await this.uploadFilePromise(lists[i].url)

                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '附件图片',
                        url: result
                    }))
                    fileListLen++
                }


                console.log(this.fileList5);
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: 'http://101.132.141.5:8081/common/upload', // 仅为示例，非真实的接口地址
                        filePath: url,
                        header: this.headers,
                        name: 'file',
                        form: {
                            user: 'test'
                        },

                        success: (res) => {
                            console.log(res);
                            console.log(JSON.parse(res.data));
                            this.form.enclosure = JSON.parse(res.data).fileName
                            console.log(this.form.enclosure);
                            setTimeout(() => {
                                resolve(res.data.data)

                            }, 1000)
                            console.log(a);
                        }
                    });
                })
            },
        }
    }
</script>

<style lang="scss">
    .form {
        padding: 0 10px 0 15px;
    }

    .box {
        width: 40px;
        padding-left: 20px;
        height: 22px;
    }
</style>
